<template>
    <div v-for="item in list" :key="item.id">
        <!-- <input type="checkbox" v-model="item.proStatus" @click="clickItem" /> -->
        <input
            type="checkbox"
            :checked="item.proStatus"
            @click="clickItem(item.id, $event)"
        />
        --- 商品名 {{ item.proName }} --- 商品价格 {{ item.proPrice }} ---
        <button @click="add(item.id)">+</button> {{ item.proNumber }}
        <button @click="sub(item.id)">-</button> --- 小计:
        {{ item.proPrice * item.proNumber }}
    </div>
</template>

<script>
export default {
    props: ["list"],
    methods: {
        // 计算总计
        getTotalPrice() {
            let _totalPrice = 0;
            let checkedNum = 0
            this.list.forEach((item) => {
                if (item.proStatus) {
                    checkedNum++
                    _totalPrice += item.proNumber * item.proPrice;
                }
            });
            // this.totalPrice = _totalPrice;
            // console.log(_totalPrice)
            this.$emit('setprice', _totalPrice);
            this.$emit('setcheckednum', checkedNum)
        },
        // 选中某一项
        clickItem(id, e) {
            this.list.forEach((item) => {
                if (item.id === id) {
                    item.proStatus = e.target.checked;
                }
            });

            this.getTotalPrice();
        },
        // 增加商品收藏数量
        add(id) {
            // console.log("数量+1", id);
            const info = this.list.find((item) => item.id === id);
            info.proNumber++;

            this.getTotalPrice();
        },
        // 减少商品收藏数量
        sub(id) {
            const info = this.list.find((item) => item.id === id);

            if (info.proNumber === 1) return;

            info.proNumber--;

            this.getTotalPrice();
        },
    },
    mounted () {
        this.getTotalPrice()
    }
};
</script>
